<template>
  <div class="dashboard-container">
    <div class="app-container">
      <PageTools :show-before="true">
        <span slot="before">
          当前审批中{{ approCenter }}本月审批通过{{ approPass }} 本月审批驳回及撤销 {{ approReject }}
        </span>
        <template v-slot:after>
          <el-button size="mini" type="primary" @click="$router.push('/approvals/securitySetting')">流程设置</el-button>
        </template>
      </PageTools>
      <el-card>
        <el-table :data="approList">
          <el-table-column align="center" type="selection" />
          <el-table-column align="center" label="序号">
            <template slot-scope="scope">
              {{ (page.page-1)*page.size + (scope.$index+1) }}
            </template>
          </el-table-column>
          <el-table-column align="center" sortable prop="processName" label="审批类型" />
          <el-table-column align="center" sortable prop="username" label="申请人" />
          <el-table-column align="center" sortable prop="procCurrNodeUserName" label="当前审批人" />
          <el-table-column align="center" sortable prop="procApplyTime" label="审批发起时间">
            <template slot-scope="scope">{{ scope.row.procApplyTime | formatDate }}</template>
          </el-table-column>
          <el-table-column align="center" sortable prop="processState" label="审批状态" :formatter="formatApprovals" />
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="toDetail(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-row type="flex" justify="center">
          <el-pagination
            background
            :page-size="page.size"
            layout="sizes,prev, pager, next,total"
            :current-page="page.page"
            :total="page.total"
            :page-sizes="[2, 4, 6, 8]"
            @size-change="handleSizeChange"
            @current-change="change"
          />
        </el-row>
      </el-card>
    </div>
  </div>
</template>

<script>
import { getApprovalsList } from '@/api/approvals'
import approvalState from '@/api/constant/approvals'
export default {
  data() {
    return {
      approList: [],
      page: {
        page: 1,
        size: 6,
        total: 0
      },
      approCenter: '',
      approPass: '',
      approReject: '',
      list: []
    }
  },
  created() {
    this.getApprovalsList()
  },
  methods: {
    change(newPage) {
      this.page.page = newPage
      this.getApprovalsList()
    },
    handleSizeChange(size) {
      this.page.size = size
      this.getApprovalsList()
    },
    async getApprovalsList() {
      this.list = await getApprovalsList({ page: 1, size: 1000 ^ 2 })
      // console.log(this.list)
      const { rows, total } = await getApprovalsList(this.page)
      // console.log(total)
      this.approList = rows
      this.page.total = total
      // console.log(this.approList)
      this.list.rows.forEach(item => {
        if (item.processState === '2') {
          this.approPass++
        } else if (item.processState === '3' || item.processState === '4') {
          this.approReject++
        } else if (item.processState === '1') {
          this.approCenter++
        }
      })
    },
    formatApprovals(row, column, cellvalue, index) {
      // console.log(cellvalue)
      const obj = approvalState.approvalState.find(item => item.id === cellvalue)
      // console.log(obj)
      return obj ? obj.value : '未知'
    },
    // 跳转
    toDetail(obj) {
      switch (obj.processName) {
        case '工资':
          this.$router.push({ path: '/approvals/salaryApproval/' + obj.processId })
          break
        case '加班':
          this.$router.push({ path: '/approvals/overtimeApproval/' + obj.processId })
          break
        case '离职':
          this.$router.push({ path: '/approvals/quitApproval/' + obj.processId })
          break
        case '请假':
          this.$router.push({ path: '/approvals/leaveApproval/' + obj.processId })
          break
        case '入职':
          this.$router.push({ path: '/approvals/enterApproval/' + obj.processId })
          break
      }
    }
  }
}
</script>

<style lang="scss">

</style>
